<template>
  <view class="box">
    <view class="example">
      <!-- 基础用法，不包含校验规则 -->
      <uni-forms
        label-width="100px"
        ref="baseForm"
        :rules="rules"
        :model="baseFormData"
      >
        <uni-forms-item class="label" label="姓名" required name="driverName">
          <uni-easyinput
            v-model="baseFormData.driverName"
            placeholder="请输入姓名"
          />
        </uni-forms-item>
        <uni-forms-item class="label" label="部门" required name="driverDept">
          <uni-data-select
            v-model="baseFormData.driverDept"
            :localdata="range"
            @change="change"
            placeholder="请选择"
          ></uni-data-select>
        </uni-forms-item>
        <uni-forms-item
          class="label"
          label="手机号码"
          required
          name="driverPhone"
        >
          <uni-easyinput
            v-model="baseFormData.driverPhone"
            placeholder="请输入手机号码"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view style="height: 80px"></view>
    <view class="below">
      <u-button @click="submit('baseForm')" type="primary"> 保存</u-button>
    </view>
  </view>
</template>

<script>
import {
  list,
  deptList,
  getDetail,
  remove,
  add,
  update,
} from "@/api/drivermanagement";
export default {
  name: "",

  data() {
    return {
      // 表单数据
      baseFormData: {
        driverName: "",
        driverDept: "",
        driverPhone: "",
      },
      range: [],
      rules: {
        driverName: {
          rules: [
            {
              required: true,
              errorMessage: "姓名不能为空",
            },
          ],
        },
        driverDept: {
          rules: [
            {
              required: true,
              errorMessage: "部门不能为空",
            },
          ],
        },
        driverPhone: {
          rules: [
            {
              required: true,
              errorMessage: "手机号码不能为空",
            },
          ],
        },
      },
    };
  },
  async onLoad(options) {
    const res = await deptList();
    this.range = res.data[0]?.children.map((item) => {
      return {
        text: item.deptName,
        value: item.id,
      };
    });
  },

  mounted() {},

  methods: {
    async submit(ref) {
      const res = await this.$refs[ref].validate();
      await add(res);
      uni.showToast({
        title: `新增成功`,
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  //   background-color: #f2f2f2;
}
.box {
  position: relative;
  min-height: 100vh;
}
.example {
  padding: 10px 0;
  background-color: #fff;
}
.label {
  padding: 0 12px 0 18px !important;
}
.below {
  width: 90%;
  position: absolute;
  left: 5%;
  bottom: 2%;
}
</style>